import { addData, loadData } from '@/api/doctorInfo';
import { Button, Card, Form, Input, Modal, Space, Table } from 'antd';
import React, { useEffect } from 'react';
import { useModel } from 'umi';
import styles from './index.module.less';

const HospitalList: React.FC = () => {
  //获取hospitalList的状态管理
  const { list, setList, open, setOpen, query, setQuery } =
    useModel('hospitalList');
  //获取表单实例
  const [myForm] = Form.useForm();

  //调接口获取数据
  useEffect(() => {
    loadData(query).then((res) => {
      console.log(res);
      setList(res.data.list);
    });
  }, [query]);

  const columns: any = [
    {
      title: '序号',
      render(v: any, r: any, i: any) {
        return i + 1;
      },
      width: 80,
      align: 'center',
    },
    {
      title: '名字',
      dataIndex: 'name',
      width: 80,
    },
    {
      title: '简介',
      dataIndex: 'desc',
      ellipsis: true,
      width: 350,
    },
    {
      title: '操作',
      width: 80,
      align: 'center',
      render(v: any) {
        return (
          <Space>
            <Button type='primary'>编辑</Button>
            <Button type='primary' danger>
              删除
            </Button>
          </Space>
        );
      },
    },
  ];
  return (
    <div className={styles.wrap}>
      <Card
        title='医院列表'
        extra={
          <Button type='primary' onClick={() => setOpen(!open)}>
            新增
          </Button>
        }
      >
        <Table
          style={{ height: 'calc(100vh - 300px)' }}
          dataSource={list} //数据数组
          rowKey={'id'} //表格行 key 的取值
          bordered //是否展示外边框和列边框
          columns={columns} //表格列的配置描述
        ></Table>
      </Card>
      <Modal
        title='编辑' //标题
        open={open} //对话框是否可见
        onCancel={() => setOpen(false)} //点击遮罩层或右上角叉或取消按钮的回调
        destroyOnClose //关闭的时候销毁
        maskClosable={false} //点遮罩层不关闭
        //点击确定按钮的时候执行
        onOk={() => myForm.submit()} // 手动触发表单的提交事件
      >
        <Form
          form={myForm}
          preserve={false} //表单关闭之后销毁
          onFinish={async (v) => {
            console.log('v', v);
            await addData({ ...v });
            setOpen(false); //关了模态框
            setQuery({ ...v, name: '', page: 1 }); //重置查询条件,重新调接口获取数据
          }}
        >
          <Form.Item name='name' label='名字'>
            <Input placeholder='请输入医院的名字' />
          </Form.Item>
          <Form.Item name='desc' label='简介'>
            <Input placeholder='请输入医院的简介' />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default HospitalList;
